<template>
  <view :id="randomID" class="a--input">{{ inputValue || '请输入' }}</view>
</template>

<script>
  export default {
    inheritAttrs: false,
    data() {
      return {
        randomID: 'adaption_' + new Date().getTime(),
        inputValue: '',
      }
    },
    mounted() {
      uni.$on('getInputWidth', (text) => {
        this.inputValue = text

        this.$nextTick(() => {
          const query = uni.createSelectorQuery().in(this)
          query
            .select(`#${this.randomID}`)
            .boundingClientRect((rect) => {
              if (rect) {
                let rectWidth = rect.width
                if (rectWidth > 150) {
                  rectWidth = 150
                }
                if (text) {
                  uni.$emit('returnInputWidth', rectWidth + 30 + 'px')
                } else {
                  uni.$emit('returnInputWidth', rectWidth + 5 + 'px')
                }
              }
            })
            .exec()
        })
      })
    },
  }
</script>

<style lang="scss" scoped>
  .adaption-input {
    font-size: 28rpx;
  }
  .a--input {
    font: inherit;
    opacity: 0;
    position: fixed;
    top: 0;
    z-index: -1;
  }
</style>
